import { color } from 'echarts/lib/theme/dark'

const data = [150, 230, 224, -13, -25, 135, 147, 260]
var max = Math.max.apply(null, data)
var min = Math.min.apply(null, data)
const tooltip = {
  trigger: 'item',
  backgroundColor: 'rgba(69, 14, 255,0.5)',
  //   axisPointer: {
  //     type: 'cross' // 十字准线指示器，可选为：'line' | 'shadow'
  //   },
  borderWidth: '0',
  textStyle: {
    color: '#6DFFFF'
  },
  lineStyle: {
    width: 2,
    type: 'dashed' // 设置虚线类型
  }
// formatter: (params) => params.value[2] === 1 ? 'Y' : 'N'
//   axisPointer: {
//     type: 'shadow'
//   }
}
export const temp = {
  title: {
    text: 'Temp',
    left: 'center',
    top: '10px',
    textStyle: {
      color: '#6C6C6C',
      fontSize: 20,
      fontWeight: 600,
      align: 'center'
    }
  },
  // dataZoom: [
  //   {
  //     id: 'dataZoomX',
  //     show: true,
  //     type: 'slider',
  //     // type: 'inside',
  //     xAxisIndex: [0],
  //     filterMode: 'filter',
  //     start: 70,
  //     end: 100,
  //     zoomOnMouseWheel: false, // 滚轮是否触发缩放
  //     moveOnMouseMove: true, // 鼠标滚轮触发滚动
  //     moveOnMouseWheel: true
  //   }
  // ],
  grid:
    {
      top: '10%',
      width: '80%',
      bottom: '10%',
      // left: '5%',
      containLabel: true
    },
  // backgroundColor: '#0f375f',
  legend: {
    show: true,
    bottom: '3%'
  },
  tooltip: {
    trigger: 'item',
    backgroundColor: 'rgba(69, 14, 255,0.5)',
    //   axisPointer: {
    //     type: 'cross' // 十字准线指示器，可选为：'line' | 'shadow'
    //   },
    borderWidth: '0',
    textStyle: {
      color: '#6DFFFF'
    },
    lineStyle: {
      width: 2,
      type: 'dashed' // 设置虚线类型
    },
    axisPointer: {
      // 坐标轴指示器，坐标轴触发有效
      type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
    }
    // formatter: (params) => params.value[1] + '°C'
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    axisLabel: {
      formatter: '{value}',
      lineStyle: {
        color: '#090909'
      }
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: '#090909'
      }
    }
  },
  yAxis: {
    type: 'value',
    min: min < 0 ? min : 0, // 如果有负数，最小值是数据的最小值，否则是0
    max: max > 0 ? max : 0,
    axisLabel: {
      formatter: '{value}°C',
      lineStyle: {
        color: '#090909'
      }
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: '#090909'
      }
    },
    splitArea: {
      show: false,
      areaStyle: {
        color: ['#ccc'] // 分割区域颜色
        // shadowColor: 'rgba(0, 0, 0, 0.5)',
        // shadowBlur: 10 // 上限、限制区域、下限、上限，使用透明度来控制斜线显示
      }
    }
  },
  series: [
    {
      // name: 'site2',
      data: data,
      type: 'line',
      label: { // 显示折现的值
        show: true,
        color: '#000000',
        backgroundColor: 'transparent'// 隐藏背景颜色不然感觉有描边
      },
      lineStyle: {
        type: 'solid', // 基准线样式为实线
        color: '#E97132',
        width: 3
      },
      // 上下限制
      markLine: {
        symbolSize: 0, // 不展示上下限两边的图标
        data: [
          // {
          //   lineStyle: {
          //     type: 'solid', // 基准线样式为实线
          //     color: '#ffc000',
          //     width: 3
          //   },
          //   yAxis: 250, // 控制限制刻度
          //   label: { show: true, position: 'end', formatter: '上限' }
          // }
          // {
          //   lineStyle: {
          //     type: 'solid', // 基准线样式为实线
          //     color: '#4f81bd',
          //     width: 3
          //   },
          //   yAxis: 50,
          //   label: { show: true, position: 'end', formatter: '下限' }
          // }
          // {
          //   lineStyle: {
          //     type: 'dashed', // 基准线样式为虚线
          //     color: '#ff9900',
          //     width: 3
          //   },
          //   yAxis: 120, // 控制限制刻度
          //   label: { show: true, position: 'end', formatter: '平均值' }
          // }
        ]
      }
    },
    {
      // name: '上限', // 注意：这里的 name 需要和 legend 的数据对应
      type: 'line',
      data: [],
      itemStyle: {
        color: '#4f81bd'
      },
      markLine: {
        symbolSize: 0, // 不展示上下限两边的图标
        silent: false,
        data: [
          {
            lineStyle: {
              type: 'solid', // 基准线样式为实线
              color: '#4f81bd',
              width: 3
            },
            yAxis: 250, // 控制限制刻度
            label: { show: true, position: 'end', formatter: 'µ+3δ' },
            tooltip: {
              show: true,
              formatter: 'µ+3δ: {c}'
            }
          }
        ]
      }
    },
    {
      // name: '下限', // 注意：这里的 name 需要和 legend 的数据对应
      type: 'line',
      data: [],
      itemStyle: {
        color: '#4f81bd'
      },
      markLine: {
        symbolSize: 0, // 不展示上下限两边的图标
        silent: false,
        data: [
          {
            lineStyle: {
              type: 'solid', // 基准线样式为实线
              color: '#4f81bd',
              width: 3
            },
            yAxis: -20,
            label: { show: true, position: 'end', formatter: 'µ-3δ' },
            tooltip: {
              show: true,
              formatter: 'µ-3δ: {c}'
            }
          }
        ]
      }
    },
    {
      // name: 'SetUp', // 注意：这里的 name 需要和 legend 的数据对应
      type: 'line',
      data: [],
      itemStyle: {
        color: '#ff9900'
      },
      markLine: {
        symbolSize: 0, // 不展示上下限两边的图标
        silent: false,
        data: [
          {
            lineStyle: {
              type: 'dashed', // 基准线样式为虚线
              color: '#ff9900',
              width: 3
            },
            yAxis: 120, // 控制限制刻度
            label: { show: true, position: 'end', formatter: 'SetUp' },
            tooltip: {
              show: true,
              formatter: 'SetUp: {c}'
            }
          }
        ]
      }
    },
    {
      // name: '平均值', // 注意：这里的 name 需要和 legend 的数据对应
      type: 'line',
      data: [],
      itemStyle: {
        color: '#196B24' // 注意：修改markLine-lineStyle，为了保持图例颜色统一，需要增加itemStyle.color
      },
      markLine: {
        symbolSize: 0, // 不展示上下限两边的图标
        silent: false,
        data: [
          {
            lineStyle: {
              type: 'solid', // 基准线样式为虚线
              color: '#196B24',
              width: 3
            },
            yAxis: 120, // 控制限制刻度
            label: { show: true, position: 'end', formatter: '平均值' },
            tooltip: {
              show: true,
              formatter: '平均值: {c}'
            }
          }
        ]
      }
    },
    {
      type: 'custom',
      renderItem: function(params, api) {
        var categoryIndex = api.value(0)
        var start = api.coord([api.value(1), categoryIndex])
        var end = api.coord([api.value(2), categoryIndex])
        var height = api.size([0, 1])[1] * 0.6
        var rectShape = echarts.graphic.clipRectByRect(
          {
            x: start[0],
            y: start[1] - height / 2,
            width: end[0] - start[0],
            height: height
          },
          {
            x: params.coordSys.x,
            y: params.coordSys.y,
            width: params.coordSys.width,
            height: params.coordSys.height
          }
        )
        return (
          rectShape && {
            type: 'rect',
            transition: ['shape'],
            shape: rectShape,
            style: api.style()
          }
        )
      },
      data: [
        [0, -39.8, -40.4],
        [1, -39.8, -40.4],
        [2, -39.8, -40.4]
      ]
    }
  ]
}

// export const rect = {
//   title: {
//     text: '睡眠情况(分)'
//   },
//   tooltip: {
//     trigger: 'axis',
//     axisPointer: {
//       type: 'shadow'
//     }
//   },
//   xAxis: {
//     data: [
//       '2023-2-12',
//       '2023-2-13',
//       '2023-2-14',
//       '2023-2-15',
//       '2023-2-16',
//       '2023-2-17',
//       '2023-2-18'
//     ],
//     axisLabel: {
//       textStyle: {
//         fontSize: 12,
//         color: '#0b4ea5' // 坐标值得具体的颜色
//       }
//     },
//     axisLine: {
//       onZero: true,
//       lineStyle: {
//         type: 'solid',
//         color: '#8298AF', // 左边线的颜色
//         width: '1' // 坐标线的宽度
//       }
//     },
//     axisTick: {
//       show: false // 去除轴下面的刻度
//     }
//   },
//   yAxis: {
//     axisLabel: {
//       textStyle: {
//         fontSize: 16,
//         color: '#0b4ea5' // 坐标值得具体的颜色
//       }
//     }
//   },
//   series: [
//     {
//       type: 'custom',
//       renderItem: function(params, api) {
//       // 颜色程度对照表
//         // const bgColorMap = [
//         //   [(score) => score >= 80 && score <= 100, () => '#01c800'],
//         //   [(score) => score >= 60 && score < 80, () => '#9ed113'],
//         //   [(score) => score >= 40 && score < 60, () => '#ddce00'],
//         //   [(score) => score >= 20 && score < 40, () => '#ff7b00'],
//         //   [(score) => score >= 0 && score < 20, () => '#ff0000']
//         // ]
//         const bgColor = '#01c800'
//         // 获取符合条件的子数组
//         // const item = bgColorMap.find((item) => item[0](api.value(1)))
//         // 子数组存在则运行子数组中的第二个元素（执行函数）
//         // const bgColor = item[1](api.value(1))
//         var xValue = api.value(0)
//         // debugger
//         var lowPoint = api.coord([xValue, api.value(1)]) // 得到下面线的中心坐标
//         var halfWidth = api.size([1, 0])[0] * 0.1 // 根据x轴索引为1的数值得到所在的映射宽度*0.1
//         return {
//           type: 'rect',
//           shape: {
//             x: lowPoint[0] - halfWidth,
//             y: lowPoint[1],
//             width: halfWidth * 2,
//             height: halfWidth
//           },
//           style: {
//             fill: bgColor,
//             stroke: '#000',
//             lineWidth: 1
//           }
//         }
//       },
//       data: [
//         ['2023-2-12', 10],
//         ['2023-2-12', 30],
//         ['2023-2-13', 100],
//         ['2023-2-14', 60],
//         ['2023-2-15', 70],
//         ['2023-2-16', 10],
//         ['2023-2-16', 80],
//         ['2023-2-17', 80],
//         ['2023-2-18', 80]
//       ],
//       name: '睡眠情况',
//       lineStyle: {
//         color: 'white'
//       },
//       itemStyle: {
//         normal: {
//           borderWidth: 1.5,
//           borderColor: 'white',
//           color: 'white'
//         }
//       }
//     }
//   ]
// }

import echarts from 'echarts'
// const rectangles = [
//   {
//     x: 300,
//     y: 8000,
//     width: 300,
//     height: 2000,
//     name: '卷长',
//     itemStyle: {
//       borderColor: 'red',
//       normal: {
//         color: 'red'
//       }
//     }
//   },
//   {
//     x: 900,
//     y: 2000,
//     width: 150,
//     height: 1000,
//     name: '幅宽',
//     itemStyle: {
//       borderColor: 'green',
//       normal: {
//         color: 'blue'
//       }
//     }
//   }
// ]
// const data1 = rectangles.map((i) => {
//   // 数组里面的值分别代表维度0， 1， 2， 3
//   return {
//     value: [i.x, i.y, i.width, i.height],
//     name: i.name,
//     itemStyle: i.itemStyle
//   }
//   // 数组里面的值分别代表维度0， 1， 2， 3，这种数据结构没有针对样式颜色
//   // return [i.x, i.y, i.width, i.height];
// })

// const datas = [
//   {
//     'value': [
//       300,
//       8000,
//       300,
//       2000
//     ],
//     'name': '卷长',
//     'itemStyle': {
//       'borderColor': 'red',
//       'normal': {
//         'color': 'red'
//       }
//     }
//   },
//   {
//     'value': [
//       900,
//       2000,
//       150,
//       1000
//     ],
//     'name': '幅宽',
//     'itemStyle': {
//       'borderColor': 'green',
//       'normal': {
//         'color': 'blue'
//       }
//     }
//   }
// ]
export const areas = {
  // tooltip: {
  //   trigger: 'axis'
  // },
  // legend: {
  //   data: ['bar', 'error']
  // },
  // dataZoom: [
  //   {
  //     type: 'slider',
  //     filterMode: 'none'
  //   },
  //   {
  //     type: 'inside',
  //     filterMode: 'none'
  //   }
  // ],
  // xAxis: {},
  // yAxis: {},
  series: [
    {
      type: 'custom',
      renderItem: function(params, api) {
        // api.coord()将数据组映射到坐标系上，api.value(n)，获取第n维度的值
        const start = api.coord([api.value(0), api.value(1)])
        debugger
        // api.size()给定数据范围，映射到坐标系上后的像素长度。比如api.size([1, 1])和坐标轴的刻度一样，长度都是1
        // 如果矩形超出了当前坐标系的包围盒，则剪裁这个矩形。
        const rectShape = this.$echarts.graphic.clipRectByRect(
          {
            x: start[0],
            y: start[1],
            width: api.size([1, 1])[0] * api.value(2),
            height: api.size([1, 1])[1] * api.value(3)
          },
          {
            x: params.coordSys.x,
            y: params.coordSys.y,
            width: params.coordSys.width,
            height: params.coordSys.height
          }
        )
        return (
          rectShape && {
            type: 'rect', // 矩形，还可以circle等
            shape: rectShape
            // style: api.style({
            //   text: `${datas[params.dataIndex].name}` // 文字内容
            // })
          }
        )
      },
      itemStyle: {
        normal: {
          opacity: 1
        }
      },
      encode: {
        x: [0, 2], // data 中『维度0』和『维度2』对应到 X 轴
        y: 1 // data 中『维度1』对应到 Y 轴
      },
      data: [
        {
          'value': [
            300,
            8000,
            300,
            2000
          ],
          'name': '卷长',
          'itemStyle': {
            'borderColor': 'red',
            'normal': {
              'color': 'red'
            }
          }
        },
        {
          'value': [
            900,
            2000,
            150,
            1000
          ],
          'name': '幅宽',
          'itemStyle': {
            'borderColor': 'green',
            'normal': {
              'color': 'blue'
            }
          }
        }
      ]
    }
  ]
}
